<!--
  ~
  ~  Copyright (c) 2018-2025, Pactera JinXin Software All rights reserved.
  ~
  -->

<template>
    <div class="log">
        <basic-container>
            <div class="page-search">
                <span>类型:</span>
                <el-select v-model="type">
                    <el-option value="0" label="正常"></el-option>
                    <el-option value="9" label="异常"></el-option>
                </el-select>
                <el-button class="madp-ml10" type="primary" @click="handleSearch">搜索</el-button>
                <el-button class="madp-ml10" @click="(type = ''), getList()">清空</el-button>
            </div>
            <el-table
                :data="tableData"
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                stripe
                v-loading="tableLoading"
            >
                <el-table-column label="序号" type="index" align="center" width="70">
                    <template slot-scope="scope">
                        {{ (page.currentPage - 1) * page.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column label="类型">
                    <template slot-scope="scope">
                        {{ scope.row.type == 9 ? '异常' : '正常' }}
                    </template>
                </el-table-column>
                <el-table-column label="标题" prop="title"></el-table-column>
                <el-table-column label="IP地址" prop="remoteAddr"></el-table-column>
                <el-table-column label="请求方式" prop="method"></el-table-column>
                <el-table-column label="客户端" prop="serviceId"></el-table-column>
                <el-table-column label="请求时间" prop="time"></el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="操作" v-if="permissions.sys_log_del">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="madp-pagination">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
        </basic-container>
    </div>
</template>

<script>
import { delObj, fetchList } from '@/api/admin/log';
import { mapGetters } from 'vuex';

export default {
    name: 'Log',
    data() {
        return {
            type: '', // 类型
            tableData: [], // 表格数据
            searchForm: {}, // 查询表单
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 20 // 每页显示多少条
            },
            tableLoading: false // 表格loading
        };
    },
    created() {
        this.getList();
    },
    mounted() {},
    computed: {
        ...mapGetters(['permissions'])
    },
    methods: {
        // 点击查询
        handleSearch() {
            this.getList(1);
        },
        // 获取表格数据
        getList(data) {
            if (!data) {
                this.page.currentPage = 1;
            }
            this.tableLoading = true;
            let obj = {
                current: this.page.currentPage,
                size: this.page.pageSize,
                descs: 'create_time'
            };
            if (this.type) obj.type = this.type;
            fetchList(obj)
                .then((response) => {
                    this.tableData = response.data.data.records;
                    this.page.total = response.data.data.total;
                    this.tableLoading = false;
                })
                .catch(() => {
                    this.tableLoading = false;
                });
        },
        // 点击删除
        handleDel: function(row) {
            let _this = this;
            this.$confirm('是否确认删除ID为"' + row.id + '"的日志?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function() {
                    return delObj(row.id);
                })
                .then(() => {
                    this.getList(this.page);
                    _this.$message({
                        showClose: true,
                        message: '删除成功',
                        type: 'success'
                    });
                })
                .catch(function() {});
        },
        // 点击分页size
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.getList(1);
        },
        // 点击页码
        handleCurrentChange(val) {
            this.page.currentPage = val;
            this.getList(1);
        }
    }
};
</script>

<style lang="scss" scoped>
.page-search {
    display: flex;
    margin-bottom: 20px;
    span {
        margin-right: 5px;
        line-height: 36px;
    }
}
</style>
